<template>
  <div class="addImChannelSkillGroup" v-if="isShowThis" v-loading="loading">
    <div style="margin-bottom:20px;">
      <p style="margin-bottom:5px;">{{$t('monitor.skillGroupName')}}</p>
      <el-input v-model.trim="DisplayName" :placeholder="$t('public.pleaseEnter')"></el-input>
    </div>
      <AgentAssign :openBatch="true" ref="agentAssign" :forChannelConfig="true" :checkedAgentsOfChannelConfig="AssignMembersArr" @assign-change="handleAssignChange" :inputShow="false"></AgentAssign>
    <el-button type="primary" class="primary_btn" @click="submit">{{$t('public.save')}}</el-button>
  </div>
</template>
<script>
  import AgentAssign from '@/components/public-modules/agent-assign/AgentAssign.vue'
  export default {
    name: 'addBusinessSkillGroup',
    data () {
      return {
        agents: [],
        isShowThis: false,
        loading: false,
        DisplayName: this.skillInfo.DisplayName || '',
        AssignMembers: this.skillInfo.Members || [],
        Members: this.skillInfo.Members || [],
      }
    },
    props: {
      skillInfo: {
        type: Object,
        default: {}
      }
    },
    methods: {
      submit () {
        let data = {}
        data.DisplayName = this.DisplayName
        if (!data.DisplayName) {
          this.$message.error(this.$t('configLazyLoad.channel.groupError1'))
          return
        }
        if (this.skillInfo._id) {
          data._id = this.skillInfo._id
        }
        data.Members = this.Members
        this.loading = true
        if (this.skillInfo._id) {
          data.Exten = this.skillInfo.Exten
          this.$store.dispatch('updateBusinessQueue', data).then((res) => {
            this.loading = false
            if (res.success) {
              this.$emit('refresh')
              this.$store.dispatch('refreshCacheFromDb', {type: 'businessQueue'})
            }
          })
        } else {
          this.$store.dispatch('getFreeQueueNoForSkill', null).then((res) => {
            if (res.success) {
              data.Exten = res.num
              this.$store.dispatch('updateBusinessQueue', data).then((res) => {
                this.loading = false
                if (res.success) {
                  this.$emit('refresh')
                  this.$store.dispatch('refreshCacheFromDb', {type: 'businessQueue'})
                }
              })
            } else {
//            this.$message.error('获取技能组号失败')
              this.loading = false
            }
          })
        }
      },
      handleAssignChange (agentCount) {
        let agentCounts = agentCount
        this.Members = []
        agentCounts.forEach(item => {
          this.Members.push( {'id': item.agent})
        })
      }
    },
    components: {
      AgentAssign
    },
    watch: {
      skillInfo () {
        this.DisplayName = this.skillInfo.DisplayName || ''
        this.assignRule = this.skillInfo.AssignRule || 'random'
//        this.IsMemory = this.skillInfo.IsMemory || false
        this.AssignMembers = this.skillInfo.Members || []
      }
    },
    computed: {
      // 所选坐席
      AssignMembersArr () {
        let agentArr = []
        let agents = this.$store.getters.agents
        this.AssignMembers.forEach(one => {
          for(let i in agents) {
            if(agents[i]._id === one.id) {
              console.log(agents[i],'agents[i]')
              agentArr.push({_id: agents[i]._id, displayName: agents[i].displayName, exten: agents[i].exten})
            }
          }
        })
        return agentArr
      }
    },
    beforeMount () {
//      this.$store.dispatch('getCache', { type: 'agents' }).then(() => {
//        this.agents = this.$getCache('agents')
      this.isShowThis = true
//      })
    }
  }
</script>
<style lang="stylus">
.addImChannelSkillGroup
  .assign
    .selecSate
      padding 0
      .scResult
        padding-left 0
        .result
          .el-input
            width 50px
</style>
<style lang="stylus" scoped>
  @import "../../../../../../assets/common.styl"
  .addImChannelSkillGroup
    box-sizing border-box
    max-height calc(100vh - 248px)
    overflow-y auto
    padding 20px
    .el-input,.el-select
      width 220px
    .skill-name,.assign-rule
      float left
    .skill-name
      margin-right 30px
    .pb20
      padding-bottom 20px
    .tishi
      clear both
      color $c-prompt
    .tip
      cursor pointer
      display inline-block
      height 16px
      width 16px
      border 1px solid $c-main
      text-align center
      line-height 16px
      border-radius 50%
      margin-left 2px
      .iconfont
        font-size 10px
        color $c-main
</style>
